<template>
  <view class="page">
    <Navbar
      left-text="丘山阅"
      :auto-back="false"
      left-icon=" "
      title=" "
      scroll-top="200"
    />
    <u-sticky customNavHeight="0" z-index="6">
      <u-swiper
        :list="bannerList"
        height="596rpx"
        circular
        key-name="img"
        interval="5000"
        duration="1000"
        @click="handleFestival"
        radius="0"
      />
    </u-sticky>
    <view class="body">
      <image class="i-icon" :src="webSrc('/assets/web_img/home/icon-1.png')" />
      <Sub-title label="活动推荐" bottom-color="#E9F4F4" />
      <u-row>
        <u-col span="6">
          <view class="row1 bgcg" @click="handlePlay">
            <Sub-title label="玩乐项目" color="#3BA199" bottom-color="#95D0CA" />
            <u-text text="游玩精彩项目" size="28rpx" color="#3BA199" />
            <view class="bgt"></view>
            <image
              :src="webSrc('/assets/web_img/home/icon-2.png')"
              style="width: 258rpx; height: 164rpx"
            />
            <image class="bgx" :src="webSrc('/assets/web_img/home/icon-5.png')" />
          </view>
        </u-col>
        <u-col span="6">
          <view class="row2 bgcg" @click="handleTrend">
            <Sub-title
              label="动态信息"
              color="#3BA199"
              size="28rpx"
              bottom-color="#95D0CA"
            />
            <u-text text="点击查看动态详情" size="20rpx" color="#3BA199" />
            <view class="bgt"></view>
            <image
              :src="webSrc('/assets/web_img/home/icon-3.png')"
              style="width: 142rpx; height: 142rpx"
            />
          </view>
          <view class="row3 bgcg" @click="handleMall">
            <Sub-title
              label="在线商城"
              color="#3BA199"
              size="28rpx"
              bottom-color="#95D0CA"
            />
            <u-text text="随时购随时玩" size="20rpx" color="#3BA199" />
            <view class="bgt"></view>
            <image
              :src="webSrc('/assets/web_img/home/icon-4.png')"
              style="width: 142rpx; height: 108rpx"
            />
          </view>
        </u-col>
      </u-row>
      <Sub-title label="交通导览" bottom-color="#E9F4F4" />
      <image
        :src="webSrc('/assets/web_img/home/guide.png')"
        style="width: 100%; height: 302rpx; border-radius: 20rpx"
        @click="handleGuidance"
      />
      <Sub-title label="吃喝玩乐" bottom-color="#E9F4F4">
        <u-icon size="30" slot="right" name="scan" color="#ccc" @click="handleScan" />
      </Sub-title>
      <image
        :src="webSrc('/assets/web_img/home/eat-drink.png')"
        style="width: 100%; height: 228rpx; border-radius: 20rpx"
        @click="handleFood"
      />
    </view>
  </view>
</template>

<script>
import Navbar from "@/components/Navbar/index";

import { homeBanner } from "@/request/homeApi.js";
export default {
  components: { Navbar },
  data() {
    return {
      navHeight: 0, // 导航栏高度
      navRight: 0, // 导航栏右侧距离
      bannerList: [], // 园区节庆轮播图列表
    };
  },
  onLoad(e) {
    if (e.q) {
      let q = decodeURIComponent(e.q);
      uni.setStorageSync("qr", q);
      this.handleScanTo(q);
    }
  },
  // 监听页面滚动
  onPageScroll(scroll) {
    uni.$emit("onPageScroll", scroll.scrollTop);
  },
  onShow() {
    this.getBannerList();
  },
  onPullDownRefresh() {
    this.getBannerList("refresh");
  },
  methods: {
    // 获取首页轮播图列表
    getBannerList(v) {
      homeBanner()
        .then((res) => {
          if (res.code == 1) {
            this.bannerList = res.data;
          }
        })
        .finally(() => {
          if (v) {
            uni.showToast({
              title: "刷新成功",
              icon: "success",
            });
            uni.stopPullDownRefresh();
          }
        });
    },
    // 扫一扫
    handleScan() {
      this.$author(() => {
        uni.scanCode({
          onlyFromCamera: false, // 是否只能从相机扫码
          scanType: ["qrCode"],
          success: (res) => {
            if (res.result.includes("/dietOrder")) {
              this.handleScanTo(res.result);
            } else {
              uni.showToast({
                title: "请扫描店铺二维码",
                icon: "none",
              });
            }
          },
          fail: (err) => {
            if (err.errMsg.includes("cancel")) return;
            uni.showToast({
              title: "请扫描正确的二维码",
              icon: "none",
            });
          },
        });
      });
    },
    // 跳转扫码
    handleScanTo(url) {
      let arr = url.split("?")[1].split("&");
      let id = arr[0].split("=")[1];
      let page = arr[1].split("=")[1];
      uni.navigateTo({
        url: `/${page}?id=${id}`,
      });
    },
    // 园区节庆
    handleFestival(i) {
      uni.navigateTo({ url: `/pages/home/festivalDetail?id=${this.bannerList[i].id}` });
    },
    // 玩乐项目
    handlePlay() {
      uni.navigateTo({ url: "/pages/home/ceremony" });
    },
    // 动态信息
    handleTrend() {
      uni.navigateTo({ url: "/pages/home/trends" });
    },
    // 在线商城
    handleMall() {
      uni.switchTab({ url: "/pages/tabBar/mallIndex" });
    },
    // 交通导览
    handleGuidance() {
      uni.navigateTo({ url: "/pages/parse/picture?type=guidance" });
    },
    // 吃喝玩乐
    handleFood() {
      uni.navigateTo({ url: "/pages/home/dietIndex" });
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  .body {
    width: 100%;
    padding: 20rpx;
    z-index: 8;
    min-height: 100rpx;
    box-sizing: border-box;
    background-color: #ffffff;
    margin-top: -80rpx;
    border-radius: 40rpx 40rpx 0 0;
    position: relative;
    .i-icon {
      position: absolute;
      right: 50rpx;
      top: -40rpx;
      width: 136rpx;
      height: 80rpx;
    }
    .row1 {
      height: 364rpx;
      margin-right: 20rpx;
    }
    .row2 {
      height: 152rpx;
      margin-bottom: 20rpx;
    }
    .row3 {
      height: 152rpx;
    }
    .bgcg {
      padding: 20rpx;
      border-radius: 16rpx;
      overflow: hidden;
      position: relative;
      background: linear-gradient(to left, #e0f4f3 5.5%, #76c1bb 113.46%);

      image {
        position: absolute;
        bottom: 10rpx;
        right: 6rpx;
      }
      .bgt {
        position: absolute;
        bottom: -30rpx;
        left: -50rpx;
        width: 140rpx;
        height: 170rpx;
        border-radius: 16rpx;
        background: linear-gradient(to bottom, #3ba19900 20.53%, $active-color 121.72%);
        transform: rotate(-28deg);
      }
      .bgx {
        position: absolute;
        top: 160rpx;
        width: 168rpx;
        height: 148rpx;
      }
    }
  }
}
</style>
